<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      Vue3 在 组件上使用 v-model 可以携带参数

        v-model:abcd="msg"
        =>
        v-bind:abcd="msg"
        v-on:update:abcd="msg = $event"

        v-model:message="msg"
        =>
        v-bind:message="msg"
        v-on:update:message="msg = $event"

        PS: v-model 没有携带参数时,可以认为有个默认参数叫做 modelValue
        
        v-model="msg"
        =>
        v-bind:modelValue="msg"
        v-on:update:modelValue="msg = $event"

     -->

    <div id="app"></div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        data() {
          return {
            sonName: "张三",
            sonAge: 18,
          };
        },

        template: `
          <Hello 
            v-model:name="sonName"
            v-model:age="sonAge"
            >
          </Hello>
        `,
      });

      app.component("Hello", {
        props: ["name", "age"],

        emits: ["update:name", "update:age"],

        template: `
          <div>
            <h2>Hello, 我是: {{ name }}, 年龄: {{ age }}</h2>
            <button @click="$emit('update:name', name + '~')">{{ name }}</button>
            <button @click="$emit('update:age', age + 1)">{{ age }}</button>
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
